import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { findFilmsPage } from '@/api/MaiZuo';

interface IFilm {
  filmId: number;
  name: string;
  [propName: string]: any; // 其他属性
}

const NowPlaying = () => {
  const [list, setList] = useState<IFilm[]>([]);

  useEffect(() => {
    list.length === 0 &&
      findFilmsPage().then((res) => {
        setList(res.films);
      });

    return () => {};
  }, [list.length]);

  const navigate = useNavigate();

  return (
    <div>
      <ul>
        {list.map((item) => (
          <li
            key={item.filmId}
            onClick={() => {
              navigate(`/detail/${item.filmId}`);
            }}
          >
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default NowPlaying;
